<template>
  <article>
    <TableBody>
      <template #header>
        <TableHeader title="表格搜索" @search="onSearch" @reset-search="onResetSearch">
          <template #search-content>
            <a-form layout="inline" :model="{}">
              <a-form-item label="客户经理">
                <a-input
                  allow-clear
                  type="text"
                  v-model="searchOptions.accountManager"
                  placeholder="客户经理"
                />
              </a-form-item>
              <a-form-item label="客户名称">
                <a-input
                  allow-clear
                  type="text"
                  v-model="searchOptions.customerName"
                  placeholder="客户名称"
                />
              </a-form-item>
              <a-form-item label="客户 ID">
                <a-input-number
                  allow-clear
                  type="text"
                  v-model="searchOptions.customerId"
                  placeholder="客户 ID"
                  hide-button
                />
              </a-form-item>
              <a-form-item label="抖音 ID">
                <a-input
                  allow-clear
                  type="text"
                  v-model="searchOptions.customerTiktokId"
                  placeholder="抖音 ID"
                />
              </a-form-item>
            </a-form>
          </template>
          <template #table-config>
            <AddButton @add="addItem">新增</AddButton>
          </template>
        </TableHeader>
      </template>
      <template #default>
        <a-table
          :bordered="false"
          :loading="table.tableLoading"
          :data="table.dataList"
          table-layout-fixed
          :scroll="{ y: table.tableHeight.value }"
          :columns="tableColumns"
        >
          <template #actions="{ record }">
            <a-button size="mini" class="mr-2" @click="editItem(record)">编辑</a-button>
            <a-button size="mini" status="danger" @click="deleteItem(record)">删除</a-button>
          </template>
        </a-table>
      </template>
      <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" />
      </template>
    </TableBody>

    <AddClient v-model:visible="visible" v-model:customer="selectCustom" @doRefresh="doRefresh" />
  </article>
</template>
<script setup lang="ts">
  import { useCustom } from './index.hook'
  import AddClient from './components/AddClient.vue'

  const {
    table,
    visible,
    selectCustom,
    searchOptions,
    onSearch,
    onResetSearch,
    addItem,
    editItem,
    deleteItem,
    doRefresh,
    pagination,
    tableColumns,
  } = useCustom()
</script>
